<template>
  <div class="breakEgg">
    <infoText ref="infoText"></infoText>
    <div class="homePage1">
      <img class="homePage1A" src="./img1/bg7.png" alt="" />
      <div class="partBot">本活动最终解释权归中国工商银行江苏省分行所有</div>
    </div>
    <div class="homePage2">
      <div class="part0"></div>
      <div v-if="gameData.breakAtk" :class="gameData.styleEl" class="part01">
        <img src="./img1/chuizi2.png" alt />
      </div>
      <div class="part1">
        <div class="part1A">
          <div
            v-for="item in 5"
            :key="item"
            class="part11"
            :class="gameData.break ? `part11-${item} part11-num2` : `part11-${item} part11-num1`"
            @click="userClickFoo(item)"
          >
            <img v-if="gameData.breakNum !== item" src="./img1/egg_11.png" alt />
          </div>
        </div>
      </div>
      <div v-if="gameData.break && gameData.breakBigNum == 1" class="part3" :style="gameData.styleEl1">
        <img style="width: 100%;" src="./img1/egg_11.png" alt />
      </div>
      <div class="part2" v-if="gameData.break">
        <img v-if="gameData.breakBigNum == 2" class="part21A" src="./img1/egg_23.png" alt />
        <img v-if="gameData.breakBigNum == 3" class="part21A" alt src="./img1/egg_25.png" />
        <img v-if="gameData.breakBigNum == 4" src="./img1/egg_24.png" alt />
        <div v-if="gameData.breakBigNum == 5">
          <img src="./img1/egg_22.png" alt />
        </div>
      </div>

      <div class="partP" v-if="prizeName">
        <div class="partP1">
          <span>提示</span>
        </div>
        <div class="partP2">{{ prizeName }}</div>
        <div class="partP3">
          <div class="partP4" @click="reLuckBtn">确认</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gameData: {
        timer: null,
        break: false,
        breakNum: -1,
        breakAtk: true,
        breakBigNum: 1,
        styleEl: '',
        styleEl1: '',
      },
      prizeName: '',
    }
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: '中秋明月夜有奖竞答',
    })

    this.reLuckBtn()
  },
  methods: {
    reLuckBtn() {
      this.gameData = {
        timer: null,
        break: false,
        breakNum: -1,
        breakAtk: true,
        breakBigNum: 1,
        styleEl: '',
        styleEl1: '',
      }
      this.prizeName = ''
    },
    async userClickFoo(i) {
      let aa = document.querySelector(`.part11-${i}`)
      let bb = aa.getBoundingClientRect()
      if (bb.width < uni.upx2px(200) * 0.8) return
      this.gameData.styleEl1 = `
        width: ${bb.width}px;
        top: ${bb.top}px;
        left: ${bb.left}px;
      `
      // 点击获奖
      this.gameData.breakNum = i
      this.gameData.break = true
      await this.delayTime(100)
      this.gameData.styleEl1 = ``
      await this.delayTime(600)
      this.gameData.breakBigNum = 1
      this.gameData.styleEl = 'part01A'
      await this.delayTime(400)
      this.gameData.breakBigNum = 2
      await this.delayTime(400)
      this.gameData.breakBigNum = 3
      await this.delayTime(300)
      this.gameData.breakBigNum = 4
      this.gameData.breakAtk = false
      await this.delayTime(500)
      this.gameData.breakBigNum = 5
      this.prizeName = '恭喜获得一元立减金'
    },
    delayTime(time) {
      // 异步延时
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
        }, time)
      })
    },
  },
}
</script>

<style lang="scss">
.breakEgg {
  position: relative;
  .homePage1 {
    position: absolute;
    height: 100vh;
    overflow: hidden;
    background-color: #bb1a21;
    .homePage1A {
      width: 100%;
    }
    .partBot {
      position: absolute;
      bottom: 20px;
      left: 0;
      text-align: center;
      font-size: 12px;
      color: #fff;
      width: 100%;
    }
  }

  .homePage2 {
    position: absolute;

    .part0 {
      height: 350px;
    }

    .part01 {
      position: absolute;
      top: 310px;
      right: 0;
      width: 100px;
      transform-origin: 100% 100%;
      animation: move 2s infinite;
      transition: all 0.3s;
      z-index: 300;
      img {
        width: 100%;
      }
    }

    .part01A {
      right: 40px;
      top: 145px;
      animation: none;
      width: 201px;
      z-index: 600;
      animation: moveRotate1 0.4s 3;
    }

    .part1 {
      width: 375px;
      margin: 0 auto;
      position: relative;
      background: url('./img1/bg1.png') no-repeat;
      background-size: 100% 120px;
      background-position: 0 70%;
      .part1A {
        position: relative;
        width: 375px;
        height: 280px;
        .part11 {
          position: absolute;
          width: 100px;
          height: 130px;
          img {
            width: 100%;
          }
        }
        /*
          5个图x和y轴动画加起来是 10s
          10s/5 等于 2s
          每个球y轴动画延迟 从0递减2s
          x轴与y轴相差动画时长的一半 5s/2
        */
        .part11-1 {
          animation: animX 5s cubic-bezier(0.36, 0, 0.64, 1) -2.5s infinite alternate,
            animY 5s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
            scale 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
        }

        .part11-2 {
          animation: animX 5s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
            animY 5s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
            scale 10s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
        }

        .part11-3 {
          animation: animX 5s cubic-bezier(0.36, 0, 0.64, 1) -6.5s infinite alternate,
            animY 5s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
            scale 10s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
        }

        .part11-4 {
          animation: animX 5s cubic-bezier(0.36, 0, 0.64, 1) -8.5s infinite alternate,
            animY 5s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
            scale 10s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
        }

        .part11-5 {
          animation: animX 5s cubic-bezier(0.36, 0, 0.64, 1) -10.5s infinite alternate,
            animY 5s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
            scale 10s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
        }

        .part11-num1 {
          animation-play-state: running;
        }

        .part11-num2 {
          animation-play-state: paused;
        }
      }
    }

    .part2 {
      position: absolute;
      top: 480rpx;
      width: 540rpx;
      left: 50%;
      transform: translateX(-50%);
      z-index: 300;
      text-align: center;
      img {
        width: 100%;
        vertical-align: bottom;
      }
      .part21A {
        width: 200px;
        padding-top: 48px;
        transition: all 0.8s;
        transform-origin: 50% 100%;
      }
    }

    .part3 {
      position: fixed;
      z-index: 400;
      transition: all 0.3s;
      width: 400rpx;
      top: 580rpx;
      left: calc(50vw - 200rpx);
    }

    .partP {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 280px;
      transform: translate(-50%, -50%);
      color: #333;
      text-align: center;
      border-radius: 8px;
      overflow: hidden;
      z-index: 500;
      background: #fff;
      .partP2 {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        padding: 20px 10px;
        line-height: 1.2;
        background: #fff;
      }

      .partP3 {
        padding-bottom: 10px;
        display: flex;
        justify-content: center;
      }

      .partP4 {
        background: rgba(255, 0, 0, 0.7);
        color: #fff;
        font-size: 16px;
        padding: 2px 10px;
        border-radius: 6px;
      }

      .partP1 {
        background: rgba(255, 0, 0, 0.7);
        color: #fff;
        height: 38px;
        line-height: 38px;
      }
    }
  }
}

@keyframes moveRotate1 {
  0% {
    transform: translate(38px, 90px) rotate(30deg);
  }

  50% {
    transform: translate(38px, 90px) rotate(0deg);
  }

  100% {
    transform: translate(38px, 90px) rotate(30deg);
  }
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-20deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes animX {
  0% {
    left: 20px;
  }

  100% {
    left: 260px;
  }
}

@keyframes animY {
  0% {
    top: 20px;
  }

  100% {
    top: 70px;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.65);
    z-index: 100;
  }

  50% {
    transform: scale(1);
    z-index: 200;
  }

  100% {
    transform: scale(0.65);
    z-index: 100;
  }
}
</style>
